<template>
  <!-- 底图切换控制按钮 -->
  <div class="maptab">
    <div
      style="float: right; height: 20px"
    />
    <div
      class="maptabs_box"
      :style="cursor"
      @mouseover="expandMapList"
      @mouseleave="collapseMapList"
    >
      <div
        class="layer1"
        :style="{ backgroundImage: 'url(' + mapList[0].bg + ')' }"
        @click="switchMap(0)"
      >
        <div class="title">{{ mapList[0].name }}</div>
      </div>
      <div
        :class="[expand ? 'layer3' : 'layer2']"
        :style="{ backgroundImage: 'url(' + mapList[1].bg + ')' }"
        @click="switchMap(1)"
      >
        <div class="title">{{ mapList[1].name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// vue3
import { reactive, toRefs } from 'vue'
// imageFile
import TDMapPng from '@/assets/gis/TDMap.png'
import sallitePng from '@/assets/gis/satelliteMap.png'
export default {
  emits: ['switch'],
  setup(props, { emit }) {
    const data = reactive({
      // 底图切换列表
      cursor: { cursor: '' },
      expand: false,
      // 底图切换列表
      mapList: [
        { name: '电子图', bg: TDMapPng },
        { name: '影像图', bg: sallitePng }
      ],
      mapChooseIndex: 0,
      currentChooseIndex: 0
    })

    // 鼠标移入展开地图栏
    const expandMapList = () => {
      data.cursor = { cursor: 'pointer' }
      data.expand = true
    }
    // 鼠标移出收起地图栏
    const collapseMapList = () => {
      data.cursor = { cursor: '' }
      data.expand = false
      if (data.currentChooseIndex !== data.mapChooseIndex) {
        // 切换底图
        data.mapList = data.mapList.reverse()
        data.currentChooseIndex = 0
      }
    }
    // 切换底图
    const switchMap = (index) => {
      data.currentChooseIndex = index
      emit('switch', data.mapList[index].name)
    }

    return {
      ...toRefs(data),
      expandMapList,
      collapseMapList,
      switchMap
    }
  }
}
</script>

<style lang="scss" scoped>
.maptab {
  position: absolute;
  right: 0;
  bottom: 15px;
  //底部切换按钮
  .maptabs_box {
    float: right;
    position: relative;
    width: 150px;
    height: 60px;

    .layer1,
    .layer2,
    .layer3 {
      width: 74px;
      height: 60px;
      border: 1px solid #fff;
      box-shadow: 0 2px 2px rgb(0 0 0 /25%);
      position: absolute;
      bottom: 0;
    }
    .layer1 {
      right: 0;

      z-index: 1005;
    }
    .layer2 {
      right: 10px;

      z-index: 1004;
    }
    .layer3 {
      right: 84px;

      z-index: 1004;
    }
    .title {
      position: absolute;
      width: 50px;
      height: 20px;
      right: 0px;
      bottom: 0px;
      text-align: center;
      color: #fff;
      font-weight: 400;
      line-height: 20px;
      background: #2770d4;
    }
  }
}
</style>
